<!--
 * @Description: 
 * @Author: charles
 * @Date: 2020-11-03 12:36:26
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-07-09 09:00:45
 * @LastEditTime: 2021-07-06 23:05:05

-->
<template>
  <div>
    <div class="header">
      <div>
        <img src="../assets/yxtx/images/lvyou.png" alt="图片丢失">
        <img src="../assets/yxtx/images/lvyou.png" alt="图片丢失">
        <img src="../assets/yxtx/images/lvyou.png" alt="图片丢失">
        <img src="../assets/yxtx/images/lvyou.png" alt="图片丢失">
        <img src="../assets/yxtx/images/lvyou.png" alt="图片丢失">
        <span>旅游指南</span>
        <img src="../assets/yxtx/images/lvyou.png" alt="图片丢失">
        <img src="../assets/yxtx/images/lvyou.png" alt="图片丢失">
        <img src="../assets/yxtx/images/lvyou.png" alt="图片丢失">
        <img src="../assets/yxtx/images/lvyou.png" alt="图片丢失">
        <img src="../assets/yxtx/images/lvyou.png" alt="图片丢失">
      </div>
      <div>
        <img src="../assets/yxtx/phone.png" alt="图片丢失">
        <span>致电我们-软件1824</span>
      </div>
    </div>
    <div class="content">
      <!-- 轮播图 -->
      <div class="lunbo">
      <el-carousel height="500px" width=  "1500px">
          <el-carousel-item >
            <img src="../assets/yxtx/images/picture1.jpg" alt="图片丢失">
          </el-carousel-item>
          <el-carousel-item >
            <img src="../assets/yxtx/images/picture2.jpg" alt="图片丢失">
          </el-carousel-item >
          <el-carousel-item >
            <img src="../assets/yxtx/images/picture3.jpg" alt="图片丢失">
          </el-carousel-item>
        </el-carousel>
      </div>
      <!-- 游学项目卡片 -->
      <div class="yxcard">
        <div class="projectCard" v-for="item in projects" :key="item.id" @click="cardClickHandler_projects(item.id)">
          <div class="photo">
            <img :src="item.figure" alt="图片丢失">
          </div>
          <div class="introduce">
            <div class="pro_title">{{item.name}}</div>
            <div class="pro_time">{{fmtDate(item.beginTime)}} ~ {{fmtDate(item.endTime)}}</div>
            <div class="pro_introduce">{{item.introduce}}</div>
          </div>
        </div>
      </div>

      <div class="xscard">
        <div class="articleCard" v-for="item in articles" :key="item.id" @click="cardClickHandler_articles(item.id)">
          <div class="photo">
            <img :src="item.cover" alt="图片丢失">
          </div>
          <div class="introduce">
            <div class="art_title">{{item.title}}</div>
            <div class="art_time">{{item.publishTime}}</div>
            <div class="art_username">{{item.baseUser.realname}}</div>
            <div class="art_useraddress">{{item.baseUser.address}}</div>
          </div>
        </div>
      </div>
      <div class="problem">旅游常见问题 </div>
      <div class="problem">1． 参加出境旅游，应该提前多少天报名？</div>
        <div class="problem">答：原则上如无护照至少提前20天。如有护照请尽早报名，以确保机位。</div>
        <div class="problem"> 2． 办理护照需要多少天、需要准备哪些资料？办理护照的程序是怎样的？</div>
        <div class="problem">答：具体可参考《办理五年期因私护照须知》。</div>
        <div class="problem">办理程序大致如下：
        1)上海户籍人士，携带好本人身份证及户口本及规格照片5张至上海市吴淞路333号办理申领手续。
        2)10个工作日后可以领取。
        3)外地户籍需回户口所在地办理护照。</div>
        <div class="problem"> 3． 出境旅游的团款一般包括什么、不包括什么？</div>
        <div class="problem"> 答：上航国旅为您考虑最为周全。 1） 报价中所包含的内容有：上海往返国际机票、境外食、宿、行、游，签证，星级酒店住宿、导游及领队服务、旅行社责任保险，特别赠送项目（以合同约定为准）；
        2） 不包括：护照工本费或加急费用，机场建设税、境外导游司机小费、自愿选择参加的额外付费项目，收费电视、电话、洗衣、个人购物，因自然灾害、交通延阻等人力不可抗拒因素所引起的额外费用。
        具体的服务内容请您参考各线路详情。</div>
        <div class="problem">4． 参加出境旅游团队，可以脱离团队吗？
        答：原则上不允许。如您确有急事，可与领队商量，但护照须上交，同时还须补交离团费用。</div>
        <div class="problem">5． 参加团队旅游,回程机票可以改期吗？</div>
        <div class="problem">答：原则上国内团队/出境团队均不可以退票和改期。</div>
        <div class="problem">6． 丢失护照补办程序有哪些？
        答：1)请前往户口所在地派出所开具丢失证明信（内容：姓名、丢失原因、身份证号码等） 2)请持证明信前往出入境管理处柜台开具登报挂失介绍信
        3)请凭介绍信及证明信前往《公安报》代理公司申请登报挂失4)三个月后请凭挂失的报纸+填好的护照申请表再次申办。用过的护照再办理时仍需要盖章，没使用过的护照无需盖政审章</div>
      </div>
    <div class="footer"></div>
  </div>
</template>
<script>

import request from '../utils/request'
import moment from 'moment'

export default {
  data() {
    return {
      projects: [],articles: []
    }
  },
  methods: 
  {
    findAllProject() {
      request.get('/index/project/pageQuery?page=1&pageSize=10&status=审核通过').then(res => {
        this.projects = res.data.list
      })
      request.get('/index/article/pageQuery?page=1&pageSize=10&status=审核通过').then(res => {
        this.articles = res.data.list
      })
    },
    fmtDate(date) 
    {
      return moment(date).format('YYYY-MM-DD HH:mm:ss')
    },
    // 卡片点击处理函数
    cardClickHandler_projects(id) {
      // 点击当前项目卡片实现路由跳转，跳转至项目的详情页
      // 路由跳转同时传递参数
      this.$router.push({ path:'/project', query:{id} })
    },
    cardClickHandler_articles(id) {
      // 点击当前项目卡片实现路由跳转，跳转至项目的详情页
      // 路由跳转同时传递参数
      this.$router.push({ path:'/article', query:{id} })
    }
  },
  created() {
    this.findAllProject()  // 调用查询游学项目方法
  } 
}
</script>
<style scoped>
  .header {
    height: 150px;
    display: flex;
    text-align: center;
    padding: 50px 100px;
    width: 1500px;
  }
  .header div {
    width: 200px;
    height: 150px;
    line-height: 150px;
    text-align: center;
    text-align: center;
  }
  .header div:first-child {
    font-size: 50px;
    flex: 10;
    text-align: center;
     padding-left: 10px;
  }
  .header div:first-child img{
    height: 80px;
    width: 80px;
     padding-left: 10px;
  }
  .header div:last-child {
    font-size: 20px;
    text-align: center;
    flex: 3;
    text-align: right;
    padding-right: 10px;
  }
  .header div:last-child img {
    width: 50px;
    height: 50px;
    margin-top: 15px;
  }
  .lunbo img {
    padding: 50px 100px;
    width: 1500px;
    
  }
  .yxcard {
    padding: 50px 100px;
    width: 1500px;
  }
  .xscard{
    width: 500px;
    height:300px;
    border-radius:10px ;
    display: flex;
    padding: 50px 100px;
  }
  .projectCard {
    display: flex;
    height: 200px;
    border-radius: 10px;
    box-shadow: 0px 0px 5px 1px rgb(214, 214, 213);
    margin-bottom: 50px;
  }
  .articleCard {
    height: 200px;
    border-radius: 10px;
    box-shadow: 0px 0px 5px 1px rgb(214, 214, 213);
    margin-bottom: 50px;
  }
  .photo {
    width: 300px;
    height: 200px;
  }
  .photo img {
    width: 300px;
    height: 200px;
  }
  .introduce {
    padding: 10px 20px;
  }
  .pro_title {
    font-size: 18px;
    color: #666;
    height: 50px;
    line-height: 50px;
    font-weight: bold;
  }
  .pro_time {
    height: 20px;
    line-height: 20px;
  }
  .pro_introduce {
    height: 100px;
    padding-top: 30px;
    line-height: 20px;
  }
  .problem{
   
    padding-top: 10px;
    align-content: center;
    width: 1500px;
    padding: 20px 100px;
    font-display :initial;
    font-size: 20px;
  }
  .problem_1{
    height: 100px;
    padding-top: 10px;
    line-height: 20px;
    align-content: center;
    width: 1500px;
    padding: 20px 100px;
   
  }

</style>